<!-- 年规 - 客户规划 - 主页 -->
<template>
  <view>
    <view class="pb-25">
      <view class="px-4 py-4 c-#999 text-28">负责人：{{ data.team_planning?.nickname }}</view>
      <view class="card relative mx-4 p-4">
        <image class="absolute right-0 bottom-0 w-230 h-300" src="/package_plan/static/images/img_team_card.png" />
        <view class="relative">
          <view class="text-60 c-#333 font-semibold">{{ data.total_person || 0 }}人</view>
          <view class="text-28 c-#999">年度企业规模目标（总人数）</view>
          <view class="flex mt-2">
            <view class="flex-1">
              <view class="text-32 c-#333 font-semibold">{{ data.original_person || 0 }}人</view>
              <view class="text-28 c-#999">原有人数（总人数）</view>
            </view>
            <view class="flex-1">
              <view class="text-32 c-#333 font-semibold">{{ data.new_person || 0 }}人</view>
              <view class="text-28 c-#999">现新增人数</view>
            </view>
          </view>
        </view>
      </view>
      <!-- 部门信息 -->
      <view class="px-1 py-4">
        <u-tabs v-model="state.tabIndex" :list="data.department_list" bg-color="none" bar-height="6" bar-width="44"
          active-color="#333" inactive-color="#999" font-size="32" :bar-style="{ backgroundColor: '#F4AF22' }" />
        <view class="card grid grid-cols-4 gap-2 mx-3 mt-3 p-4">
          <view class="flex-1">
            <view class="text-32 c-#333 font-semibold">{{ department?.original_person || 0 }}人</view>
            <view class="text-28 c-#999 mt-1">原人数</view>
          </view>
          <view class="flex-1">
            <view class="text-32 c-#333 font-semibold">{{ department?.total_person || 0 }}人</view>
            <view class="text-28 c-#999 mt-1">目标人数</view>
          </view>
          <view class="flex-1">
            <view class="text-32 c-#333 font-semibold">{{ department?.new_person || 0 }}人</view>
            <view class="text-28 c-#999 mt-1">新增人数</view>
          </view>
          <view class="flex-1">
            <view class="text-32 c-#333 font-semibold">{{ numFormat(department?.growth_rate || 0) }}%</view>
            <view class="text-28 c-#999 mt-1">增长率</view>
          </view>
        </view>
      </view>
      <!-- 计划信息 -->
      <view class="px-4">
        <view v-for="(item, index) in data.plan_list" :key="index">
          <view class="flex justify-between items-center py-3">
            <view class="text-40 c-#333 font-semibold">{{ item.name }}</view>
            <view v-if="item.name == '组织成长计划'" class="text-28 c-#999">内训+外训+企业顾问</view>
          </view>
          <view class="card p-3">
            <view v-for="(plan, planIndex) in allPlanList(item)" :key="planIndex" :class="[{ 'mt-3': planIndex > 0 }]">
              <view class="text-32 c-#333 font-semibold">{{ plan.month }}月份</view>

              <view v-for="(child, childIndex) in plan.list" :key="childIndex" class="flex items-center mt-2">
                <view v-if="child.status == 0" class="event-indicator" />
                <u-icon v-else-if="child.status == 1" name="checkmark-circle-fill" color="#f4af22" size="30" />
                <u-icon v-else-if="child.status == 2" name="close-circle-fill" color="#999" size="30" />
                <view class="ml-2 text-28 c-#333"><text class="font-bold mr-1">{{ child.month }}/{{ child.day }}</text>{{
                  child.content }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view v-if="isSocietyManager || isPlanManager" class="bottom-wrap-16 flex bg-#fff border-top px-4"
      @click="emit('edit')">
      <view class="flex-1 button-edit">编辑</view>
    </view>
  </view>
</template>
<script setup>
import { numFormat } from '@/common/util/format'

import { useUserStore } from '@/store/user'

const userStore = useUserStore()

const emit = defineEmits(['edit'])
const props = defineProps({
  data: Object
})

const state = reactive({
  tabIndex: 0,
  showAllCustomerChannel: false,
  showAllCoreMarket: false,
  showAllKeyMarket: false,
  showAllPlan: false,
})

const department = computed(() => props.data.department_list[state.tabIndex]?.plan_list[0])

const allPlanList = computed(() => (item) => {
  if (!item.plan_list || item.plan_list?.length == 0) return
  const list = []

  item.plan_list?.forEach(item => {
    const plan = list.find(plan => plan.month == item.month)
    if (plan) {
      plan.list = plan.list || []
      plan.list.push(item)
    } else {
      list.push({ month: item.month, list: [item] })
    }
  })
  return list.sort((prev, current) => prev.month - current.month)
})

const isSocietyManager = computed(() => userStore.isSocietyManager || userStore.isSocietyCreator)
const isPlanManager = computed(() => userStore.userInfo.id == props.data?.team_planning?.id)
</script>

<style>
page {
  background-color: #f8f8f8;
}
</style>
<style lang="scss" scoped>
.card {
  border-radius: 12rpx;
  background-color: #FFFFFF;
  box-shadow: -1.2246468525851679e-16px 2px 6px 0px rgba(206, 143, 12, 0.1);
}

.button-edit {
  width: 514rpx;
  height: 68rpx;
  border-radius: 12rpx;
  border: 2rpx solid #F4AF22;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #F4AF22;
  font-size: 28rpx;
}

.border-top {
  border-top: 2rpx solid #eee;
}

.event-indicator {
  width: 26rpx;
  height: 26rpx;
  margin: 0 2rpx;
  border-radius: 50%;
  border: 2rpx solid #F4AF22;
}
</style>
